<template>
  <div class="list">
    <div v-for="(val, i) in cityList" :key="i">
      <div class="list-title">{{ val.title }}</div>
      <ul class="list-msg">
        <li class="list-item" v-for="item in val.lists" :key="item.id">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["cityList"],
};
</script>
<style scoped lang="stylus">
@import '~@/assets/css/common.styl';
.list-title {
  font-size: 0.26rem;
  color: #212121;
  padding: 0.2rem 0.3rem;
}
.list-msg {
  overflow: hidden;
  position: relative;
  background: #fff;
}
.list-msg ::before {
  content: "";
  position: absolute;
  left: 25%;
  width: 25%;
  height: 100%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.list-msg ::after {
  content: "";
  position: absolute;
  left: 75%;
  width: 25%;
  height: 100%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.list-item {
  font-size: 0.28rem;
  width: 25%;
  text-align: center;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem solid #ddd;
  textOverflow();
}
</style>
